import React, { Component, ComponentClass } from 'react';
import {AtIcon, AtInput, AtDrawer, AtListItem, AtList} from 'taro-ui'
import Taro from '@tarojs/taro';
import {Picker, Text, View} from '@tarojs/components'
import {Good} from '../../utils/server.interface'
import {user} from '../../utils/user.service'
import {MD_PAGE, MD_SUPPLIERS} from "../../constants/api";
import {vcmonitor} from "../../utils/tools";
import {newHttp} from "../../utils/request";
import {getGlobalData} from "../../utils/global";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import './recording.scss'

type PageOwnProps = {}
type PageState = {
  loadMoreStatus: 'more' | 'noMore' | 'loading'
  pageSize: number
  list: Good[]
  calculateData: any
  show: boolean
  searchForm: {
    order_num: string
    supplier_name: string
    phone: string
    add_date_start: string
    add_date_end: string
  }
  tipsNum: number
  supplierList: []
  supplierIndex: number
  supplierName: string
  supplier_id: string
}

class Recording extends Component {
  state: PageState = {
    supplierList: [],
    supplierIndex: 0,
    supplierName: '',
    supplier_id: '',
    loadMoreStatus: 'loading',
    pageSize: 10,
    list: [],
    calculateData:[],
    show: false,
    searchForm: {
      order_num: '',
      supplier_name: '',
      phone: '',
      add_date_start: '',
      add_date_end: ''
    },
    tipsNum: 0
  }
  page = 1
  shareParams = ''

  async UNSAFE_componentWillMount() {
    this.shareParams = await user.getSellerParams()
    let {supplierName,supplier_id} = this.state
    const supplierIndex = Taro.getStorageSync('supplierIndex') || 0
    const supplierList = await newHttp.catchPost(MD_SUPPLIERS);
    if (supplierList) {
      supplierName = supplierList[supplierIndex].company
      supplier_id = supplierList[supplierIndex].id
      this.setState({supplierName, supplierList, supplier_id}, async () => {
        const list = await this.getAdds(this.page)
        this.setState({list})
      })
    }
  }

  async componentDidShow() {
    vcmonitor(this);
  }

  resetForm() {
    this.state.searchForm = {
      order_num: '',
      supplier_name: '',
      phone: '',
      add_date_start: '',
      add_date_end: ''
    }
    this.setState({searchForm: this.state.searchForm})
  }

  async getAdds(page = 1) {
    const {pageSize} = this.state
    const parmasObj = {
      page: this.page,
      pageSize,
      supplier_id:this.state.supplier_id
    }
    parmasObj.order_num = this.state.searchForm.order_num
    parmasObj.supplier_name = this.state.searchForm.supplier_name
    parmasObj.add_date_start = this.state.searchForm.add_date_start
    parmasObj.add_date_end = this.state.searchForm.add_date_end
    const indexGoods = await newHttp.catchPost(MD_PAGE, parmasObj)

    if (indexGoods.data) {
      if (indexGoods.data.length < pageSize) {
        this.setState({loadMoreStatus: 'noMore', show: false,calculateData:indexGoods.calculateData, list: indexGoods.data})
      } else {
        this.setState({loadMoreStatus: 'more', show: false,calculateData:indexGoods.calculateData, list: indexGoods.data})
      }
      return indexGoods.data
    } else {
      return []
    }
  }

  async onReachBottom() {
    if (this.state.loadMoreStatus != 'noMore') {
      this.setState({loadMoreStatus: 'loading'})
      const old = this.state.list
      this.page++
      const newData = await this.getAdds(this.page)
      this.setState({list: [...old, ...newData]})
    }
  }

  jump() {
    Taro.navigateTo({url: '/distributor/poster/poster?url=' + 'poster.url'})
  }

  onDateChangeStart = e => {
    this.state.searchForm.add_date_start = e.detail.value
    this.setState({
      searchForm: this.state.searchForm
    })
  }
  onDateChangeEnd = e => {
    this.state.searchForm.add_date_end = e.detail.value
    this.setState({
      searchForm: this.state.searchForm
    })
  }

  handleChange(name, value) {
    this.state.searchForm[name] = value
    this.setState({searchForm:this.state.searchForm})
  }

  showTips(num) {
    const that = this
    that.setState({tipsNum: num}, () => {
      const timer = setTimeout(() => {
        that.setState({
          tipsNum: 0
        })
        clearTimeout(timer)
      }, 2100)
    })
  }
  searchShow(){
    this.resetForm()
    this.setState({show: true})
  }
  //切换供应商
  supplierChange(e) {
    //console.log(e)
    const {supplierList} = this.state
    const supplierIndex = Number(e.detail.value)
    // let supplierChecked = supplierList[supplierIndex].company
    // let mdStatus = this.checkMd(supplierList[supplierIndex].id)

    this.setState({supplierIndex, supplierName: supplierList[supplierIndex].company,supplier_id:supplierList[supplierIndex].id}, () => {
      this.getAdds()
      Taro.setStorageSync('supplierIndex', supplierIndex)
    })
  }

  render() {
    const {calculateData,supplierName,supplierList, supplierIndex, tipsNum, loadMoreStatus, list, searchForm} = this.state

    return (
      <View className='recording-order-root'>
        <GzhAuth />
        <View className='supplier-box f-c-c'>
          <View> 供应商: {supplierName} </View>
          <Picker onChange={this.supplierChange.bind(this)} range={supplierList} value={supplierIndex}
            rangeKey='company'
          >
            <View>
              <Text className='btn'>切换</Text>
            </View>
          </Picker>
          <AtIcon onClick={this.searchShow.bind(this)} className='iconshaixuan' prefixClass='car' value='iconshaixuan' size='18px' color='#fff' />
        </View>
        <View className='data-box'>
          <View className='data-item-wrap'>
            <View className='data-item'>
              <View className='text'>
                消费销售总额
              </View>
              <View className='price'>
                ¥{calculateData.all_fee}
              </View>
              <View className={`tips ${tipsNum == 1 ? 'twos' : ''}`}>发展的{process.env.fxName}总人数</View>
            </View>
            <View className='shu' />
            <View className='data-item'>
              <View className='text'>
                使用{getGlobalData()}总数
              </View>
              <View className='price'>
                ¥{calculateData.use_integral}
              </View>
              <View className={`tips ${tipsNum == 2 ? 'twos' : ''}`}>发展的{process.env.fxName}总人数</View>
            </View>
          </View>
          <View className='data-item-wrap data-item-wrap-border'>
            <View className='data-item'>
              <View className='text'>
                {getGlobalData()}抵扣总额
              </View>
              <View className='price'>
                ¥{calculateData.integral_deduction}
              </View>
              <View className={`tips ${tipsNum == 3 ? 'twos' : ''}`}>发展的{process.env.fxName}总人数</View>
            </View>
            <View className='shu' />
            <View className='data-item'>
              <View className='text'>
                实际支付总额
              </View>
              <View className='price'>
                ¥{calculateData.total_fee}
              </View>
              <View className={`tips ${tipsNum == 4 ? 'twos' : ''}`}>发展的{process.env.fxName}总人数</View>
            </View>
          </View>
        </View>
        {list && list.map((item, index) => <View key={index} className='list-box'>
          <View className='item'>
            <View className='item-view'>
              <View className='lt'>供应商名称:</View>
              <View className='rt'>{item.supplier_name}</View>
            </View>
            <View className='item-view'>
              <View className='lt'>交易单号:</View>
              <View className='rt'>{item.order_num}</View>
            </View>
            <View className='item-view'>
              <View className='lt'>交易时间:</View>
              <View className='rt'>{item.add_date}</View>
            </View>
            <View className='item-view'>
              <View className='lt'>付款人昵称:</View>
              <View className='rt'>{item.nick_name}</View>
            </View>
            <View className='item-view'>
              <View className='lt'>付款人手机号:</View>
              <View className='rt'>{item.phone}</View>
            </View>
            <View className='item-view'>
              <View className='lt'>消费金额:</View>
              <View className='rt'>¥{item.all_fee}</View>
            </View>
            <View className='item-view'>
              <View className='lt'>抵扣{getGlobalData()}:</View>
              <View className='rt'>{item.use_integral}</View>
            </View>
            <View className='item-view'>
              <View className='lt'>{getGlobalData()}抵扣额:</View>
              <View className='rt'>¥{item.integral_deduction}</View>
            </View>
            <View style='border-bottom:none' className='item-view'>
              <View className='lt'>实付金额:</View>
              <View className='rt'>¥{item.total_fee}</View>
            </View>
          </View>
        </View>)}
        <AtDrawer
          show={this.state.show}
          right
          mask
        >
          <View className='shaixuan'>
            <View className='shaixuan-text'>筛选</View>
          </View>
          <View className='drawer-item'>
            <View className='form-item'>
              <View className='title'>订单号</View>
              <View> <AtInput
                name='orderNum'
                type='text'
                value={searchForm.order_num}
                onChange={this.handleChange.bind(this, 'order_num')}
              /></View>
            </View>
            <View className='form-item'>
              <View className='title'>供应商名称</View>
              <View> <AtInput
                name='supplier'
                type='text'
                value={searchForm.supplier_name}
                onChange={this.handleChange.bind(this, 'supplier_name')}
              /></View>
            </View>
            <View className='form-item'>
              <View className='title'>客户电话</View>
              <View> <AtInput
                name='phone'
                type='text'
                value={searchForm.phone}
                onChange={this.handleChange.bind(this,'phone')}
              /></View>
            </View>
            <View className='form-item'>
              <View className='title'>交易日期起</View>
              <View className='picker-date'>
                <Picker mode='date' onChange={this.onDateChangeStart}>
                  <AtList>
                    <AtListItem extraText={this.state.searchForm.add_date_start} />
                  </AtList>
                </Picker>
              </View>
            </View>
            <View className='form-item'>
              <View className='title'>交易日期止</View>
              <View className='picker-date'>
                <Picker mode='date' onChange={this.onDateChangeEnd}>
                  <AtList>
                    <AtListItem extraText={this.state.searchForm.add_date_end} />
                  </AtList>
                </Picker>
              </View>
            </View>
          </View>
          <View className='submit_box'>
            <View onClick={this.resetForm.bind(this)} className='btn btn1'>重置</View>
            <View onClick={this.getAdds.bind(this)} className='btn btn2'>搜索</View>
          </View>
        </AtDrawer>
      </View>
    )
  }
}

export default Recording as ComponentClass<PageOwnProps, PageState>
